<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'product.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'product.breadcrumb.productJobDispatch' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
        <div class="da-list-container">
          <div class="da-list-header">
                <div class="d-input">
                  <div class="inputIn">
                    <input dTextInput style="width: 180px;"  [error]="false" placeholder="工单号" name="filterRole" class="me-2" [(ngModel)]="JobOrderNum">
                    <input dTextInput style="width: 180px;"  [error]="false" placeholder="销售单号" name="销售单号" class="me-2">
                    <d-select style="width: 180px;" [options]="optionsStatus" placeholder="工单状态" [(ngModel)]="JobOrderStatus" class="me-2"></d-select>
                    <input dTextInput style="width: 180px;"  [error]="false" placeholder="物料编码" name="filterRole" class="me-2" [(ngModel)]="partNum">
                  </div>
                  <div class="d-submit">
                    <d-button id="primaryBtn"  (click)="search()"><i class="icon icon-filter-o me-2" ></i>查询</d-button>
                    <d-button bsStyle="common" (click)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
                    <d-button bsStyle="common" (btnClick)="printCurrentOrder()"><i class="icon icon-print me-2"></i>打印</d-button>
                  </div>
                </div>

          </div>
          <div class="list-content">
            <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true" [tableWidthConfig]="tableWidthConfig"  [tableOverflowType]="'auto'" [scrollable]="true"  [resizeable]="true"
            >
              <thead dTableHead>
                <tr dTableRow>
                  <th dHeadCell [fixedLeft]="'0px'">
                    <span>操作</span>
                  </th>
                  <th dHeadCell [fixedLeft]="colOption.fixedLeft"
                 *ngFor="let colOption of dataTableOptions.columns" [title]="colOption.header">{{colOption.header}}</th>
                </tr>
              </thead>
              <tbody dTableBody>
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex" >
                  <tr dTableRow>

                    <td dTableCell [attr.colspan]="4" class="job"
                    [rowItem]="rowItem" [fixedLeft]="'20px'"
                    >
                      <div class="procduct-job"  (click)="toggleRowItem(rowItem,rowIndex)">
                        <div class="icon ">
                          <span class="icon icon-chevron-right" [class.rotated]="rowItem.display"></span>
                        </div>
                        <div class="product-job-r">
                          <div class="jobNum">
                            <span><span class="font-w">工单号：</span>{{rowItem.jobNum}}</span>
                          </div>
                          <div *ngIf="rowItem.saleOrderNum">
                            <span><span class="font-w">销售订单号：</span>{{rowItem.saleOrderNum}}</span>
                          </div>
                          <div *ngIf="!rowItem.saleOrderNum">
                            <span><span class="font-w">销售订单号：</span>未与销售关联</span>
                          </div>
                          <div>
                            <span><span class="font-w">计划生产数量：</span>{{rowItem.productionQuantity}}</span>
                          </div>
                          <div>
                            <span><span class="font-w">产品编码：</span>{{rowItem.productNum}}</span>
                          </div>
                          <div class="jobNum">
                            <span><span class="font-w">产品名称：</span>{{rowItem.productName}}</span>
                          </div>
                          <div>
                            <span><span class="font-w">计划开始时间：</span>{{rowItem.jobOrderPlanStartDate | date:'yyyy-MM-dd'}}</span>
                          </div>
                          <div>
                            <span><span class="font-w">计划结束时间：</span>{{rowItem.jobOrderPlanEndDate | date:'yyyy-MM-dd'}}</span>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td dTableCell> </td>
                    <td dTableCell> </td>
                    <td dTableCell> </td>
                    <td dTableCell> </td>
                    <td dTableCell> </td>
                    <td dTableCell> </td>
                    <td dTableCell> </td>
                    <td dTableCell> </td>
                    <td dTableCell> </td>
                    <td dTableCell> </td>
                  </tr>
                  <ng-container *ngIf="rowItem.display">
                    <tr  *ngFor="let item of rowItem.jobOrderProcesses ; let index = index; " >
                      <td dTableCell  [rowItem]="item" [fixedLeft]="'0px'">
                        <span ><a  (click)="dispatch(item)" [class.disabled]="item.isOutsourcing" class="devui-link me-2">分配人员</a></span>
                        <span  ><a  class="devui-link-danger"  (click)="revokeAssign(item)" [class.disabled]="item.isOutsourcing">全部撤回</a></span>
                        <span  class="ms-2"><a  class="devui-link"  (click)="printProcess(rowItem, item)"><i class="icon icon-print me-1"></i>打印</a></span>
                      </td>
                      <td dTableCell [rowItem]="item" [fixedLeft]="'250px'">
                        <span dTooltip [content]="item.processNumber">{{item.processNumber}}</span>
                      </td>
                      <td dTableCell [rowItem]="rowItem">
                        <span dTooltip [content]="item.processNum">{{item.processNum}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="item.processName">{{item.processName}}</span>
                      </td>
                      <td dTableCell>
                        <span *ngIf="item.isAssign" class="me-3">
                          <div style="display: inline-block;">
                            <d-badge [showDot]="true" status="success" class="me-2"></d-badge>
                            <span dTooltip [content]="'已派工'">已派工</span>
                          </div>
                        </span>
                        <span *ngIf="item.isIssue" class="me-3">
                          <div style="display: inline-block;">
                            <d-badge [showDot]="true" status="success" class="me-2"></d-badge>
                            <span dTooltip [content]="'已领料'">已领料</span>
                          </div>
                        </span>
                        <span *ngIf="!item.isAssign" class="me-3">
                          <div style="display: inline-block;">
                            <d-badge [showDot]="true" status="waiting" class="me-2"></d-badge>
                            <span dTooltip [content]="'未派工'">未派工</span>
                          </div>
                        </span>
                        <span *ngIf="!item.isIssue" class="me-3">
                          <div style="display: inline-block;">
                            <d-badge [showDot]="true" status="waiting" class="me-2"></d-badge>
                            <span dTooltip [content]="'未领料'">未领料</span>
                          </div>
                        </span>
                      </td>
                      <td dTableCell style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                        <span dTooltip [content]="getUserNames(item)"><span *ngFor="let a of item.users; let isLast=last">
                          {{a.name}}{{isLast ? '' : '，'}}
                        </span></span>
                      </td>
                      <td dTableCell>
                        <d-progress [percentage]="(item.qualifiedAmount / item.productionQuantity) * 100">
                          <ng-template [dPosition]="'center'">
                            <div class="overflow-ellipsis" [title]="item.qualifiedAmount + '/' + item.productionQuantity">
                              {{ item.qualifiedAmount }}/{{item.productionQuantity}}
                            </div>
                          </ng-template>
                        </d-progress>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="item.reportedAmount">{{item.reportedAmount}}</span>
                      </td>
                      <td dTableCell *ngIf="item.isOutsourcing">
                        <span dTooltip [content]="'委外'"><d-tag [tag]="'委外'" [labelStyle]="'false'"></d-tag></span>
                      </td>
                      <td dTableCell *ngIf="!item.isOutsourcing">
                        <span dTooltip [content]="'自制'"><d-tag [tag]="'自制'" [labelStyle]="'true'"></d-tag></span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="item.isFirstInspection | YesOrNo"><d-tag [tag]="item.isFirstInspection | YesOrNo"></d-tag></span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="item.isEndInspection | YesOrNo"><d-tag [tag]="item.isEndInspection | YesOrNo"></d-tag></span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="item.planStartTime | date:'yyyy-MM-dd'">{{item.planStartTime | date:'yyyy-MM-dd'}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="item.actualStartTime | date:'yyyy-MM-dd'">{{item.actualStartTime | date:'yyyy-MM-dd'}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="item.planFinishTime | date:'yyyy-MM-dd'">{{item.planFinishTime | date:'yyyy-MM-dd'}}</span>
                      </td>
                      <td dTableCell>
                        <span dTooltip [content]="item.actualFinishTime | date:'yyyy-MM-dd'">{{item.actualFinishTime | date:'yyyy-MM-dd'}}</span>
                      </td>
                    </tr>
                  </ng-container>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
          <div class="page-footer">
            <div>
              <p>已选 <span class="underline">{{checkedIds.length}}</span> 条
                <a (click)="cleared()" class="clear">清空</a>
              </p>
            </div>
            <d-pagination
            [size]="'sm'"
            [canViewTotal]="true"
            [canChangePageSize]="true"
            [canJumpPage]="true"
            [maxItems]="5"
            [total]="this.pager.total"
            [pageSizeOptions]="this.pageSizeOptions"
            [(pageSize)]="pager.pageSize"
            [(pageIndex)]="pager.pageIndex"
            (pageIndexChange)="pageIndexChange($event)"
            (pageSizeChange)="pageSizeChange($event)"
            >
            </d-pagination>
          </div>
        </div>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>

